/**
 * 学习目标：react中实现列表渲染 - 数组渲染，类似 v-for
  我们经常需要遍历一个数组来重复渲染一段结构
  在react中，通过map方法进行列表的渲染（💥 map方法 需要 返回值）
  注意点：
  1. 返回的内容也是 jsx，所以变量也是要用 {item} 包起来使用
  2. 遍历时，需要加上key,有id用id，没id用index
  3. 遍历内容,例如当前的 ul 不需要写在 遍历里面
 */
import React from 'react';
import ReactDOM from 'react-dom';

// const arr = [<li>香蕉</li>, <li>苹果</li>, <li>雪梨</li>];
const arr = ['香蕉', '苹果', '雪梨'];
// const newArr = arr.map((item) => {
//   return <li>{item}</li>;
// });
const dom = (
  <>
    <ul>
      {arr.map((item, index) => {
        return <li key={index}>{item}</li>;
      })}
    </ul>
  </>
);

ReactDOM.render(dom, document.getElementById('root'));
